<template>
  <view class="top-bar">
    <view class="top-bar-content">
      <view class="logo">兴趣搭子</view>
      <view class="version-switch">
        <view class="version-slider" :style="sliderStyle"></view>
        <view class="version" :class="activeVersion === 'entertainment' ? 'active' : ''" @tap="switchVersion('entertainment')">娱乐版</view>
        <view class="version" :class="activeVersion === 'work' ? 'active' : ''" @tap="switchVersion('work')">工作版</view>
      </view>
    </view>
    <view class="search-bar">
      <image src="/static/svg/search.svg" mode="aspectFit" class="search-icon" />
      <input class="search-input" placeholder="搜活动、主理人、俱乐部名称" />
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'

// 当前激活的版本
const activeVersion = ref('entertainment')

// 计算滑块位置
const sliderStyle = computed(() => {
  const translateX = activeVersion.value === 'entertainment' ? '0%' : '100%'
  return {
    transform: `translateX(${translateX})`
  }
})

// 切换版本
const switchVersion = (version) => {
  console.log('点击了版本:', version)
  console.log('当前版本:', activeVersion.value)
  activeVersion.value = version
  console.log('切换后版本:', activeVersion.value)
  console.log('切换到:', version === 'entertainment' ? '娱乐版' : '工作版')
  // 这里可以添加更多的切换逻辑，比如路由跳转、数据刷新等
}
</script>

<style scoped>
.top-bar {
  display: flex;
  flex-direction: column;
  padding: 12px 16px 8px;
  background: #d6f6f8;
  position: sticky;
  top: 0;
  z-index: 100;
}

.top-bar-content{
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}

.logo {
  font-weight: 800;
  font-size: 24px;
  margin-right: 10px;
  color: #333;
}

.version-switch {
  display: flex;
  background: #e6f7f8;
  border-radius: 30px;
  padding: 2px;
  margin-right: 10px;
  align-items: center;
  position: relative;
}

.version-slider {
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(50% - 2px);
  height: calc(100% - 4px);
  background: #3de6e6;
  border-radius: 30px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}

.version {
  padding: 6px 16px;
  font-size: 14px;
  border-radius: 30px;
  color: #666;
  cursor: pointer;
  transition: color 0.3s ease;
  position: relative;
  z-index: 2;
  flex: 1;
  text-align: center;
}

.version.active {
  color: #fff;
}

.search-bar {
  display: flex;
  align-items: center;
  background: #ffffff;
  border-radius: 20px;
  padding: 6px 12px;
  margin-top: 8px;
}

.search-icon {
  width: 20px;
  height: 20px;
}

.search-input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  margin-left: 8px;
  flex: 1;
  color: #666;
}

.top-icons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.more-icon,
.minus-icon,
.camera-icon {
  width: 24px;
  height: 24px;
}

.more-icon image,
.minus-icon image,
.camera-icon image {
  width: 100%;
  height: 100%;
}
</style>